<template>
  <div id="merpar">
    <div class="role_left">
      <div class="role">
        <div class="role_s">
          <img src="../image/矩形 11 拷贝 5.png" alt="" />
          <img src="../image/基本信息.png" alt="" />
        </div>
        <div class="role_hx">
          <img src="../image/矩形 11 拷贝 12.png" alt="" />
        </div>
        <div class="role_wx"><img :src="this.headimgurl" alt="" /></div>
        <div class="role_card_main">
          <div class="role_text-1"><span>会员id号</span></div>
          <div class="role_text-2">
            <span>{{ uid }}</span>
          </div>
          <div class="role_text-3"><span>昵 称</span></div>
          <div class="role_text-4">
            <span>{{ nickname }}</span>
          </div>
          <div class="role_text-5"><span>会员卡号</span></div>
          <div class="role_text-6">
            <span>{{ card_num }}</span>
          </div>
          <div class="role_text-7"><span>注册时间</span></div>
          <div class="role_text-8">
            <span>{{ created_at }}</span>
          </div>
          <div class="role_text-9"><span>真实姓名</span></div>
          <div class="role_text-10">
            <span>{{ point }}</span>
          </div>
          <div class="role_text-11"><span>手 机 号</span></div>
          <div class="role_text-12">
            <span>{{ mobile }}</span>
          </div>
          <div class="role_text-13"><span>等级</span></div>
          <div class="role_text-14"><span>v03</span></div>
          <div class="role_text-15"><span>积分</span></div>
          <div class="role_text-16">
            <span>{{ level }}</span>
          </div>
          <div class="role_text-17"><span>状态</span></div>
          <div class="role_text-18" v-if="comment_state == 0">
            <span class="success">允许发言</span>
          </div>
          <div class="role_text-18" v-else><span>禁言中</span></div>
          <div class="role_text-19"><span>最新登录</span></div>
          <div class="role_text-20">
            <span>{{ this.last_login_time }}</span>
          </div>
        </div>
      </div>
      <div class="role_bottom" v-infinite-scroll="load" style="overflow: auto">
        <div class="role_b">
          <img src="../image/矩形 11 拷贝 5.png" alt="" />
          <img src="../image/评论.png" alt="" />
        </div>
        <div class="role_hx">
          <img src="../image/矩形 11 拷贝 12.png" alt="" />
        </div>

        <ul>
          <li :key="index" v-for="(item, index) in commentInfo">
            <div class="_pinglun">
              <div class="role_bottom_btn">
                <el-button type="danger" @click="delete_merpar_comment(item)"
                  >删除</el-button
                >
              </div>
              <div class="role_bottom_text-1">
                <span>{{ item.productname }}</span>
              </div>
              <div class="role_bottom_text-2">
                <span>
                  {{ item.created_at }}
                </span>
              </div>
              <div class="role_bottom_text-3">
                <span>{{ item.content }}</span>
              </div>

              <ul class="pl_image">
                <li :key="index" v-for="(item, index) in commentInfo">
                  <img :src="item.img" alt="" />
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="role_right" v-infinite-scroll="load" style="overflow-y: auto">
      <div class="role_right_s">
        <img src="../image/矩形 11 拷贝 5.png" alt="" />
        <img src="../image/购买记录.png" alt="" />
      </div>
      <div class="role_right_hx">
        <img src="../image/矩形 11 拷贝 12.png" alt="" />
      </div>
      <ul class="card_merpar">
        <li :key="index" v-for="(item, index) in orderInfo">
          <div class="role_right_card">
            <div class="role_right_ch">
              <span>{{ item.productname }}</span>
            </div>
            <div class="role_right_text1"><span>订 单 号</span></div>
            <div class="role_right_text2">
              <span>{{ item.ordernumber }}</span>
            </div>
            <div class="role_right_text3"><span>单 价</span></div>
            <div class="role_right_tag">
              <el-tag
                type="danger"
                color="red"
                size="mini"
                v-if="item.status == 2"
                >待使用</el-tag
              >
              <el-tag size="mini" v-else-if="item.status == 6">待评论</el-tag>
              <el-tag type="info" size="mini" v-else-if="item.status == 5"
                >已退款</el-tag
              >
              <el-tag type="warning" size="mini" v-else-if="item.status == 4"
                >交易成功</el-tag
              >
            </div>
            <div class="role_right_text4">
              <span>{{ item.sellprice }}</span>
            </div>
            <div class="role-right_text5"><span>数量</span></div>
            <div class="role-right_text6">
              <span>{{ item.count }}</span>
            </div>
            <div class="role-right_text7"><span>预定日期</span></div>
            <div class="role-right_text8">
              <span>{{ item.playdate }}</span>
            </div>
            <div class="role-right_text9"><span>下单时间</span></div>
            <div class="role-right_image">
              <img src="../image/矩形 11 拷贝 16.png" alt="" />
            </div>
            <div class="role-right_text10">
              <span>{{ item.created_at }}</span>
            </div>
            <div class="role_right_text11">{{ item.comsumefee }}</div>
          </div>
        </li>
      </ul>
    </div>
    <!-- <button @click="getmemberInfo">获取会员详情数据</button> -->
  </div>
</template>
<script>
import { getmemberInfo, getdeleteComment } from "../request/index.js";
export default {
  data() {
    return {
      msgcljx: "",
      memberId: "",
      uid: "",
      nickname: "",
      created_at: "",
      point: "",
      mobile: "",
      card_num: "",
      level: "",
      last_login_time: "",
      headimgurl: "",
      content_list: [],
      commentInfo: [],
      orderInfo: [],
    };
  },
  methods: {
    //删除会员评论
    delete_merpar_comment(item) {
      this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: item.id,
            type: 1,
          };
          getdeleteComment(data).then((res) => {
            console.log(res);
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getmemberInfo();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    load() {
      this.count += 2;
    },
    getmemberInfo() {
      this.memberId = this.$route.query;

      console.log(this.memberId.id);
      getmemberInfo({ memberId: this.memberId.id }).then((res) => {
        console.log(res);
        console.log(res.info.nickname);
        this.nickname = res.info.nickname;
        this.uid = res.info.uid;
        this.created_at = res.info.created_at;
        this.point = res.info.point;
        this.mobile = res.info.mobile;
        this.card_num = res.info.card_num;
        this.level = res.info.level;
        this.last_login_time = res.info.last_login_time;
        this.comment_state = res.info.comment_state;
        this.headimgurl = res.info.headimgurl;
        console.log(this.orderInfo);
        this.orderInfo = res.orderInfo;
        this.commentInfo = res.commentInfo;
        // console.log(res.status);
      });
    },
  },
  mounted() {
    this.getmemberInfo();
  },
};
</script>
<style>
.card_merpar {
  overflow: hidden;
  margin-top: 70px;
}
.pl_image > li > img {
  width: 100%;
  height: 100%;
}
.pl_image > li {
  height: 100px;
  width: 100px;
  float: left;
  background-color: #ccc;
  margin-left: 15px;
  margin-top: 180px;
}
._pinglun {
  width: 100%;
  height: 300px;
  /* background-color: pink; */
  position: relative;
}

.role_right_text11 {
  position: absolute;
  right: 10px;
  bottom: 16px;
  color: red;
  font-size: 18px;
  font-weight: 700;
}

.role-right_image {
  left: 21px;
  position: absolute;
  top: 156px;
}

.role-right_text10 {
  position: absolute;
  top: 185px;
  font-weight: 700;
  left: 100px;
}

.role-right_text9 {
  position: absolute;
  top: 185px;
  left: 10px;
}

.role-right_text8 {
  position: absolute;
  top: 139px;
  font-weight: 700;
  left: 100px;
}

.role-right_text7 {
  position: absolute;
  top: 139px;
  left: 10px;
}

.role-right_text6 {
  top: 111px;
  left: 100px;
  position: absolute;
  font-weight: 700;
}

.role-right_text5 {
  position: absolute;
  top: 111px;
  left: 10px;
}

.role_right_text4 {
  top: 85px;
  position: absolute;
  left: 100px;
  font-weight: 700;
}

.el-tag.el-tag--danger {
  background-color: #fef0f0;
  border-color: #fde2e2;
  color: #fff;
}

.role_right_tag {
  position: absolute;
  right: 0;
  top: 0;
}

.role_card_main {
  width: 70%;

  height: 50%;
  /* background-color: red; */
}

.role_right_text3 {
  position: absolute;
  top: 85px;
  left: 10px;
}

.role_right_text2 {
  position: absolute;
  top: 60px;
  left: 100px;
  font-weight: 700;
}

.role_right_text1 {
  position: absolute;
  top: 60px;
  left: 10px;
}

.role_right_ch {
  position: absolute;
  color: #4c8dff;
  top: 10px;
  left: 10px;
  font-weight: 700;
}
.success {
  color: rgb(65, 199, 24);
}
.role_right_card {
  width: 96%;
  height: 220px;
  margin-left: 2%;
  /* margin-top: ; */
  /* background-color: red; */
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(228, 206, 206, 0.5);
  position: relative;
}

.role_bottom_text-3 {
  position: absolute;
  top: 74px;
  left: 20px;
}

.role_bottom_text-2 {
  font-size: 10px;
  position: absolute;
  top: 43px;
  left: 20px;
}

.role_bottom_btn {
  position: absolute;
  right: 36px;
  top: 75px;
}

.role_bottom_text-1 {
  color: #3b3b3b;
  font-size: 18px;
  font-weight: 700;
  top: 17px;
  left: 20px;
  position: absolute;
}

.role_text-20 {
  position: absolute;
  top: 292px;
  left: 456px;
  font-size: 16px;
  font-weight: 700;
}

.role_text-19 {
  position: absolute;
  top: 255px;
  left: 456px;
  font-size: 18px;
  color: #929292;
}

.role_text-18 {
  position: absolute;
  top: 292px;
  left: 175px;
  font-weight: 700;
  font-size: 16px;
  color: #f7999b;
}

.role_text-17 {
  top: 255px;
  font-size: 18px;
  left: 175px;
  position: absolute;

  color: #929292;
}

.role_text-16 {
  position: absolute;
  top: 205px;
  left: 955px;
  font-size: 16px;
  font-weight: 700;
}

.role_text-15 {
  position: absolute;
  top: 167px;
  font-size: 18px;
  left: 955px;
  color: #929292;
}

.role_text-14 {
  position: absolute;
  top: 205px;
  font-size: 16px;
  left: 671px;
  font-weight: 700;
}

.role_text-13 {
  position: absolute;
  top: 167px;
  left: 671px;
  font-size: 18px;
  color: #929292;
}

.role_text-12 {
  position: absolute;
  top: 205px;
  left: 456px;
  font-size: 16px;
  font-weight: 700;
}

.role_text-11 {
  position: absolute;
  top: 167px;
  left: 456px;
  font-size: 18px;
  color: #929292;
}

.role_text-10 {
  font-size: 16px;

  position: absolute;
  top: 205px;
  left: 176px;
  font-weight: 700;
}

.role_text-9 {
  font-size: 18px;
  position: absolute;
  top: 167px;
  left: 174px;
  color: #929292;
}

.role_text-8 {
  position: absolute;
  top: 120px;
  left: 955px;
  font-size: 16px;
  font-weight: 700;
}

.role_text-7 {
  position: absolute;
  top: 80px;
  font-size: 18px;
  left: 955px;
  color: #929292;
}

.role_text-6 {
  position: absolute;
  top: 122px;
  left: 671px;
  font-weight: 700;
}

.role_text-5 {
  position: absolute;
  top: 80px;
  left: 671px;
  color: #929292;
  font-size: 18px;
}

.role_text-4 {
  position: absolute;
  top: 122px;
  left: 456px;
  font-weight: 700;
}

.role_text-3 {
  position: absolute;
  top: 80px;
  left: 457px;
  font-size: 18px;
  color: #929292;
}

.role_text-2 {
  position: absolute;
  top: 120px;
  font-size: 16px;
  left: 175px;
  font-weight: 700;
  color: #282828;
}

.role_text-1 {
  position: absolute;
  top: 80px;
  left: 172px;
  font-size: 18px;
  color: #929292;
}

#merpar {
  width: 100%;
  height: 800px;
  /* background-color: #fff; */
  margin-top: 5px;
  /* background-color: red; */
}

.role {
  width: 100%;
  height: 42%;
  background-color: #fff;
  /* margin-top: px; */
  position: relative;
  overflow: hidden;
}
.role_hx {
  margin-top: 42px;
  margin-left: 20px;
}
.role_left {
  width: 75%;
  height: 100%;
  background-color: #f3f5fa;
  border-radius: 8px;
  position: relative;
  /* top: 10px; */
  display: inline-block;
  overflow: hidden;
}

.role_s {
  position: absolute;
  left: 20px;
  top: 20px;
}

.role_b {
  margin-left: 20px;
  margin-top: 20px;
}

.role_wx {
  position: absolute;
  top: 0.4rem;
  left: 20px;
}

.role_right {
  width: 22%;
  height: 100%;
  background-color: #fff;
  display: inline-block;
  overflow: hidden;
  margin-left: 2%;
  margin-top: 15px;
  border-radius: 8px;
  position: relative;
}

.role_bottom {
  width: 100%;
  height: 433px;
  background-color: #fff;
  margin-top: 2%;
  position: relative;
  overflow: hidden;
}

.role_right_s {
  position: absolute;
  top: 20px;
  left: 20px;
}

.role_right_hx {
  position: absolute;
  top: 40px;
}
</style>